<template>
	<view>
		<view class="top-back">
			<view class="top-name">模板库</view>
			<view class="top-right top-right-left" @click="selectFile">
				<view class="top-exit">上传文件</view>
			</view>
			<view class="top-right" @click="sortAction">
				<view class="top-exit">调整分类</view>
			</view>
			<!-- <view class="top-right" @click="sortAction">
				<view class="top-exit">批量下载</view>
			</view> -->
			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../../static/select_select.png"></image>
			</view>
		</view>
		<view class="uni-container">
			<scroll-view class="left-back" scroll-y="true">
				<view :class="btnselect == -1 && rowselect ==0?'left-item left-item-select':'left-item'">
					<text class="left-item-name left-item-name-top" @click="clickBasicAction">分类</text>
					<uni-icons @click="clickAddRoleAction" class="left-item-add" type="plusempty" size="20"></uni-icons>
				</view>
				<view v-for="(item,index) in roleArr" :key="index">
					<view :class="btnselect == index && rowselect ==0?'left-item left-item-select':'left-item'">
						<image :class="item.show?'left-item-image':'left-item-image left-item-image-trans' "
							@click="clickShowAction(index)" src="../../../../static/arrow_down.png"></image>
						<view class="left-item-name" @click="clickShowAction(index)">{{item.name}}</view>
						<image class="left-item-btn" v-bind:id="item.id" @click="leftAction"
							src="../../../../static/pc_list.png"></image>
					</view>
					<view v-if="item.show" v-for="(value1,ind) in item.children" :key="ind">
						<view
							:class="btnselect == index && rowselect == ind+1?'left-item left-item-select':'left-item'">
							<image class="left-item-image left-item-image1"></image>
							<view class="left-item-name" @click="clickLest1Action(index,ind)">{{value1.name}}</view>
							<image class="left-item-btn" v-bind:id="value1.id" @click="left1Action"
								src="../../../../static/pc_list.png">
							</image>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="right-back" scroll-x="true">
				<uni-table ref="mytable" :loading="loading" stripe type="selection" emptyText=" "
					@selection-change="selectionChange">
					<uni-tr>
						<uni-th align="center" width="200">文件名称</uni-th>
						<uni-th align="center" width="180">模板分类</uni-th>
						<uni-th align="center" width="120">上传者</uni-th>
						<uni-th align="center" width="180">上传时间</uni-th>
						<uni-th align="center" width="200">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="left">
							<!-- 							<image class="header-img" mode="aspectFill" :src="item.fileUrl"></image>
 -->
							<!-- 图片 -->
							<image src="../../../../static/phone/jpg.png" class="header-img"
								v-if="item.fileSuffix =='jpg' || item.fileSuffix=='png'|| item.fileSuffix=='jpeg'|| item.fileSuffix=='webp'">
							</image>
							<!-- 文档 -->
							<image src="../../../../static/phone/case-detail-word.png" class="header-img"
								v-else-if="item.fileSuffix =='docx' || item.fileSuffix=='doc'">
							</image>
							<!-- 表格 -->
							<image src="../../../../static/phone/case-detail-excel.png" class="header-img"
								v-else-if="item.fileSuffix =='xlsx' || item.fileSuffix=='xls'">
							</image>

							<!-- ppt -->
							<image src="../../../../static/phone/case-detail-ppt.png" class="header-img"
								v-else-if="item.fileSuffix =='pptx' || item.fileSuffix=='ppt'">
							</image>
							<!-- pdf -->
							<image src="../../../../static/phone/case-detail-pdf.png" class="header-img"
								v-else-if="item.fileSuffix =='pdf' || item.fileSuffix =='pdfx'">
							</image>

							<image v-else src="../../../../static/phone/case-detail-pdf.png" class="header-img">
							</image>
							<text class="celltext" selectable="true">{{ item.name }}</text>

						</uni-td>
						<uni-td align="center"><text selectable="true">{{ item.classify.name }}</text></uni-td>
						<uni-td align="center"><text selectable="true">{{ item.createAt }}</text></uni-td>
						<uni-td align="center"><text selectable="true">{{ item.createTime }}</text></uni-td>
						<uni-td align="center">
							<view style="display: flex;align-items: center;justify-content: center;">
								<view class="item-blue-text" @click="delAction(item)">删除</view>
								<view style="margin-left: 12px;" class="item-blue-text" @click="downloadAction(item)">下载
								</view>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="search-back" v-if="tableData.length == 0">
					<image class="search-image" :src="pc_search_nodata"></image>
					<view class="search-noresult">没有查询到结果</view>
				</view>
			</scroll-view>
		</view>
		<tempClassAdd v-if="showAddClass" :classID='classID' :editType='editType' v-on:successBack='updataRequest()'
			:classArr='roleArr' @addRoleClose='clickAddRoleClose'></tempClassAdd>
		<temAdjust v-if="showAddMember" :selectIdArr='selectIdArr' :classIndex='btnselect' :childIndex='rowselect'
			v-on:successBack='updataRequest()' @tempAdjustClose='clickTempAdjustClose'></temAdjust>

		<popSelect v-model="showMessage" :x="x" :y="y" placement="top-end" dynamic>
			<view>
				<view class="pop-item" v-if="showAdd" @click="addClassAction">新增分类</view>
				<view class="pop-item" @click="editClassAction">编辑分类</view>
				<view class="pop-item" @click="delClassAction">删除分类</view>
			</view>
		</popSelect>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="screenFormData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.name" placeholder="文件名称" />
					</uni-forms-item>
					<uni-forms-item>
						<selectxy :zindex=399 ref="selectxy" :value="multipleArr" placeholder="文件类型"
							:options="rangeList" @change="multipleChange">
						</selectxy>
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.createAt" placeholder="上传者" />
					</uni-forms-item>

					<uni-forms-item>
						<view style="display: flex;justify-content: space-between;">
							<view class="date-select-back" @click="openDatetimePicker(0)">
								<image class="dateimage" src="../../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updatestart" class="date-select-time">
									{{screenFormData.updatestart}}
								</view>
								<view v-else class="date-select-plac">上传时间起</view>
							</view>
							<view class="date-select-back" @click="openDatetimePicker(1)">
								<image class="dateimage" src="../../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updateend" class="date-select-time">
									{{screenFormData.updateend}}
								</view>
								<view v-else class="date-select-plac">上传时间止</view>
							</view>
						</view>
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
			<dateTimeSelect :type='date' ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2030" />
		</popSelect>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDelDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="dialogDelConfirm" @close="dialogDelClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script scoped>
	import addMember from "@/packageB/PC/systemSet/add.vue"
	import popSelect from "@/components/popSelect/popSelect.vue"
	import tempClassAdd from "@/packageB/PC/consultMange/templateLib/templateClassAdd.vue"
	import requsetFileId from '@/pages/utils/upload.js'
	import selectxy from "@/components/select-cy/select-cy.vue"
	import temAdjust from "@/packageB/PC/consultMange/templateLib/templateAdjust.vue"
	export default {
		components: {
			addMember,
			popSelect,
			tempClassAdd,
			selectxy,
			temAdjust
		},
		data() {
			return {
				showAddMember: false,
				tableData: [],
				roleArr: [], //角色
				btnselect: 0,
				rowselect: 1,
				x: 0,
				y: 0,
				showMessage: false,
				showAddClass: false,
				editType: 'add',
				classID: '',
				showAdd: false,
				screenSelect: false,
				screenx: 0,
				screeny: 0,
				showScreen: false,
				screenFormData: {
					name: '',
					createAt: "",
					type: '',
					updatestart: '',
					updateend: '',
				},
				screenSelect: false,
				dateSelectIndex: 0,
				multipleArr: [],
				selectArr: [],
				rangeList: [],
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png',
				fileItem: {}, //已上传文件
				selectItem: {},
				selectedIndexs: [], //多选已选
				selectIdArr: [], //多选id
			}
		},
		onLoad() {

		},
		mounted() {
			this.requestRoleData();
			this.requestDicData();
		},
		methods: {
			//列表网络请求
			async requestListData() {
				let _this = this

				var item;
				var classifyId;
				if (_this.btnselect == -1) {
					classifyId = '' //所有分类
				} else if (_this.rowselect == 0) {
					item = _this.roleArr[_this.btnselect];
					classifyId = item.id
				} else {
					item = _this.roleArr[_this.btnselect];
					classifyId = item.children[_this.rowselect - 1].id;
				}

				let parmas = {
					'classifyId': classifyId,
					size: '1000'
				}

				if (this.screenSelect) {
					if (_this.screenFormData.name) {
						this.$set(parmas, 'name', 'lk:' + _this.screenFormData.name)
					}
					if (_this.screenFormData.createAt) {
						this.$set(parmas, 'createAt', 'lk:' + _this.screenFormData.createAt)
					}
					//文件类型
					if (_this.selectArr.length) {
						var dicStr = '';
						for (var i = 0; i < _this.selectArr.length; i++) {
							if (i == 0) {
								dicStr = _this.selectArr[i].value
							} else {
								dicStr += "," + _this.selectArr[i].value
							}
						}
						this.$set(parmas, 'fileTypeDict', 'in:' + dicStr)
					}


					if (_this.screenFormData.updatestart && !_this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'ge:' + _this.screenFormData.updatestart)
					}
					if (!_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'le:' + _this.screenFormData.updateend)
					}
					if (_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'bt:' + _this.screenFormData.updatestart + ',' + _this
							.screenFormData.updateend)
					}
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						item.fileUrl = _this.$imageUrls({
							fileUrl: item.fileUrl
						})

						arr.push(item)
						console.log(item.fileUrl)
					}
					_this.tableData = arr;
					_this.$refs.mytable.clearSelection()
					_this.selectedIndexs = [];
				}
			},
			//分类网络请求
			async requestRoleData() {
				let _this = this
				let parmas = {
					'pid': ''
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template/classify",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.roleArr = res.data.data.list;
					for (var i = 0; i < _this.roleArr.length; i++) {
						await _this.requestRoleChildData(res.data.data.list[i].id, i);
					}
					_this.initShowAction();
					_this.requestListData();
				}
			},

			//二级分类网络请求
			async requestRoleChildData(pid, index) {
				let _this = this;
				let parmas = {
					'pid': pid
				}
				console.log(parmas);
				const res = await this.$myRequest({
					url: "/comm/classify/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var item = _this.roleArr[index];
					item.children = res.data.data.list;
					_this.$set(_this.roleArr, index, item);
					console.log(_this.roleArr);

				}
			},
			async updataRequest() {
				this.requestRoleData()
			},
			//文件类型
			async requestDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/attach_file_type",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.rangeList = arr;
					console.log(_this.rangeList)
				}
			},



			//新增分类
			addClassAction() {
				this.showMessage = false;
				this.editType = 'add'
				this.showAddClass = true;
			},
			//编辑分类
			editClassAction() {
				this.showMessage = false;
				this.editType = 'edit'
				this.showAddClass = true;
			},
			//删除分类
			delClassAction() {
				this.showMessage = false;
				this.$refs.alertDialog.open()
			},
			//删除分类接口
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this
				let parmas = {
					'ids': this.classID,
				}
				const res = await this.$myRequest({
					url: "/comm/classify",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestRoleData();
				}
			},

			// 上传文件
			selectFile() {
				console.log('1')
				this.getOss();
				var _this = this;
				console.log('2')
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						console.log('选择文件:' + res)

						let filename = res.tempFiles[0].name;
						if (filename.indexOf(".xls") == -1 && filename.indexOf(".xlsx") == -1) {
							uni.showModal({
								title: '提示',
								content: '文件类型必须为excel！(.xls或.xlsx)',
								confirmColor: '#0177ff',
								confirmText: '确定',
							})
						} else {
							_this.fileItem = res.tempFiles[0];
							_this.uploadFile();
						}
					}
				})
			},

			//添加模板文件
			async requestAddTempleData(fileItem) {
				let _this = this
				var item = _this.roleArr[_this.btnselect];
				var classItem = item.children[_this.rowselect - 1];
				let parmas = {
					'classifyId': classItem.id?classItem.id:'0',
					'name': fileItem.name,
					'fileSuffix': fileItem.fileSuffix,
					'fileUrl': fileItem.fileUrl,
					'fileTypeDict': fileItem.fileSuffix
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					_this.requestListData();
				}
			},

			//上传文件
			async uploadFile() {

				var _this = this;
				uni.showLoading({
					title: '正在上传...'
				});
				console.log('选择文件：', _this.fileItem)
				let uploadPath = _this.fileItem.path;
				let fileSuffixArray = uploadPath.split('.')

				let fileSuffix = _this.fileItem.extname
				if (fileSuffixArray.length > 1) {
					fileSuffix = fileSuffixArray[1];
				}
				let name = _this.fileItem.name
				let ossPath = 'template'
				const uploads = await requsetFileId.getPath(ossPath, uploadPath, name)
				console.log('模板uploads', uploads)

				var fileItem = {
					'name': name,
					'fileSuffix': fileSuffix,
					'fileUrl': uploads,
					'fileTypeDict': fileSuffix
				};
				_this.requestAddTempleData(fileItem)
				uni.hideLoading()
			},

			/**
			 * 获取上传文件临时秘钥
			 */
			async getOss() {
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/oss/sts",
					header: {
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken")
					},
				})
				console.log('获取oss上传临时密钥', res)
				if (res.data.code == 200) {
					getApp().globalData.upLoadAccess = res.data.data
					var time = Date.now()
					getApp().globalData.upLoadAccess.time = time
				}
			},

			delAction(item) {
				this.selectItem = item;
				this.$refs.alertDelDialog.open()
			},
			async dialogDelConfirm() {
				console.log('点击确认')
				let _this = this

				let parmas = {
					'ids': this.selectItem.id,
				}
				const res = await this.$myRequest({
					url: "/admin/template",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestListData();
				}
			},

			dialogDelClose() {
				console.log('点击关闭')
			},

			//下载
			downloadAction(item) {
				console.log(item)
				// var wxflie = uni.getFileSystemManager();
				 var _this = this;
				uni.downloadFile({
					url: getApp().globalData.baseUrl + "/comm/attachFile/" + item.id,
					header: {
						"Content-Type": "application/x-xls",
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					},
					success: function(res) {
						wx.hideLoading();
						console.log(res)
						wx.saveImageToPhotosAlbum({
								// filePath: res1.savedFilePath,
								filePath: res.tempFilePath,
							}).then(save => {
								console.log('保存成功', save)
								wx.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								})
							})
							.catch(error => {
								console.log('保存失败', error)
							})
						// wxflie.saveFile({
						// 	tempFilePath: res.tempFilePath,
						// 	filePath: `${wx.env.USER_DATA_PATH}/` + item.name,
						// 	success: (res1) => {
						// 		console.log(res1)
						// 		wx.saveImageToPhotosAlbum({
						// 				// filePath: res1.savedFilePath,
						// 				filePath: res.tempFilePath,
						// 			}).then(save => {
						// 				console.log('保存成功', save)
						// 				wx.showToast({
						// 					title: '保存成功',
						// 					icon: 'success',
						// 					duration: 2000
						// 				})
						// 			})
						// 			.catch(error => {
						// 				console.log('保存失败', error)
						// 			})
						// 	}
						// })
					},
					fail: function(err) {
						wx.hideLoading();
						console.log('下载失败：', err);
					},
				});

			},


			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},

			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},
			//文件类型
			multipleChange(item, value) {
				this.selectArr = item;
				this.multipleArr = value;
			},

			//类型选择
			typeChange(e) {
				console.log(e)
			},

			// 日期选择打开picker
			openDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.myPicker.show();
			},

			// 日期选择关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			//日期选择
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				var time = `${e.year}-${e.month}-${e.day} `;
				if (this.dateSelectIndex == 0) {
					this.screenFormData.updatestart = time;
				} else if (this.dateSelectIndex == 1) {
					this.screenFormData.updateend = time;
				}
			},
			//筛选重置
			selectReset() {
				this.screenFormData = {
						name: '',
						createAt: "",
						type: '',
						updatestart: '',
						updateend: ''
					},
					this.$refs.selectxy.handleAllRemove();
				this.screenSelect = false;
				this.requestListData();
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestListData()
			},

			dialogClose() {
				console.log('点击关闭')
			},

			//顶级分类
			clickBasicAction() {
				this.btnselect = -1;
				this.rowselect = 0;
				this.requestListData();
			},

			//展开、隐藏分类
			clickShowAction(index) {
				var item = this.roleArr[index];
				if (this.btnselect != index || (this.btnselect == index && this.rowselect != 0)) {
					item.show = true;
				} else {
					item.show = !item.show
				}
				this.$set(this.roleArr, index, item)
				this.btnselect = index;
				this.rowselect = 0;
				this.requestListData()
			},
			//首次展开、隐藏分类
			initShowAction() {
				console.log('展开')
				var item = this.roleArr[0];
				item.show = true;
				this.$set(this.roleArr, 0, item)

			},

			//
			leftAction(e) {
				console.log(e)
				this.classID = e.currentTarget.id;
				this.x = e.touches[0].clientX;
				this.y = e.touches[0].clientY + 4;
				this.showAdd = true;
				this.showMessage = !this.showMessage;
			},
			left1Action(e) {
				console.log(e)
				this.classID = e.currentTarget.id;
				this.x = e.touches[0].clientX;
				this.y = e.touches[0].clientY + 4;
				this.showAdd = false;
				this.showMessage = !this.showMessage;
			},

			clickLestAction(index) {
				this.btnselect = index;
				this.rowselect = 0;
			},
			clickLest1Action(index, ind) {
				this.btnselect = index;
				this.rowselect = ind + 1;
				this.requestListData()
			},

			//上传文件
			importFile() {
				var _this = this;
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						console.log(res)
						let filename = res.tempFiles[0].name;
						_this.fileItem = res.tempFiles[0];

					}
				})
			},
			//调整分类
			sortAction() {
				console.log('333')
				this.selectIdArr = [];
				for (var i = 0; i < this.tableData.length; i++) {
					var item = this.tableData[i];
					for (var j = 0; j < this.selectedIndexs.length; j++) {
						var value = this.selectedIndexs[j];
						if (i == value) {
							this.selectIdArr.push(item.id)
						}
					}
				}
				if (this.selectIdArr.length == 0) {
					uni.showToast({
						title: '请选择文件',
						icon: 'none'
					})
					return;
				}
				this.showAddMember = true;
			},

			//新增角色
			clickAddRoleAction() {
				this.editType = 'add'
				this.classID = this.roleArr.length ? this.roleArr[0].id :'0'
				this.showAddClass = true;
			},

			clickAddRoleClose() {
				this.showAddClass = false;
			},

			clickTempAdjustClose() {
				this.showAddMember = false;
			}
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
		display: flex;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		cursor: pointer;
		width: 76px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-back {
		width: 200px;
		min-width: 200px;
		background-color: white;
		height: 100%;
		border-right: 1px #eee solid;
	}

	.right-back {
		min-width: 100px;
	}

	.left-item {
		display: flex;
		font-size: 14px;
		color: #555;
		align-items: center;
		padding: 10px;
		font-weight: 500;
		background-color: white;
	}



	.left-item-select {
		background-color: #E8F7FB;
	}

	.left-item-image {
		width: 16px;
		min-width: 16px;
		height: 16px;
		cursor: pointer;
	}

	.left-item-image-trans {
		-webkit-transform: rotateZ(-90deg);
	}

	.left-item-image1 {
		margin-left: 10px;
	}

	.left-item-name {
		margin-left: 5px;
		font-weight: 400;
		max-width: 155px;
		width: 155px;
		cursor: pointer;
	}

	.left-item-name-top {
		font-weight: bolder;
		font-size: 15px;
	}

	.left-item-btn {
		margin-right: 0px;
		margin-left: auto;
		width: 16px;
		min-width: 16px;
		height: 16px;
		cursor: pointer;
	}

	.pop-item {
		margin: 10px;
		color: #2DA9C5;
	}

	.left-item-add {
		margin-right: 0px;
		margin-left: auto;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	.header-img {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.date-select-back {
		width: 130px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.dateimage {
		width: 16px;
		height: 16px;
		margin-left: 10px;
		margin-right: 3px;
	}

	.date-select-plac {
		font-size: 12px;
		color: #999999;
	}

	.date-select-time {
		font-size: 12px;
		color: #333333;
	}

	.celltext {
		min-width: 100px;
		max-width: 150px;
		word-break: break-all;
	}
</style>
